<template>
	<!-- 业务员中心 -->
	<view class="wrap">
		<view class="input-group">
			<view class="input-column border-bottom-1px">
				<text class="title">账号</text>
				<view class="input-item">
					<input class="padding-10" v-model="phone" placeholder="请输入账号"/>					
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">密码</text>
				<view class="input-item">
					<input class="padding-10" v-model="password" type="password" placeholder="请输入密码"/>					
				</view>
			</view>
		</view>
		<view class="fc-84 fs-28 text-tc" @click="goToApply">申请成为业务员</view>
		<view class="login-btn fc-ff text-tc" @click="goToCare">登录</view>
		<view class="agreement">
			<view class="flex mar-bot-42 fs-28">
				<radio-group @change="radioGroup">
					<radio color="#84C0F4" :value="radioValue" :checked="checked" 
					style="transform:scale(0.72);font-size: 40rpx;">登录代表您已意</radio>
					<i class="agreement2">《用户协议》、《隐私政策》</i>
				</radio-group>				
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				radioValue: 1,//协议选择
				checked: true,
				phone: '',
				password: ''
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		onShow() {
			this.$store.dispatch("getUserInfo");
		},
		methods:{
			// 跳转到业务员认证
			goToApply() {
				uni.navigateTo({
					url: 'apply'
				})
			},
			// 登录
			goToCare() {
				uni.showLoading({
					title:"登录中..."
				})
				var param = {
					phone: this.phone,
					password: this.password,
					wxUserId: this.userInfo.id
				}
				this.$apis.loginSalesman(param)
				.then(res=>{
					uni.hideLoading();
					uni.navigateTo({
						url: 'care'
					})
				})
			},
			//协议同意
			radioGroup(e) {
				this.radioValue = e.detail.value;
				console.log(this.radioValue)
			},
		}
	}
</script>
<style lang="scss">
	.input-group {
		border-radius: 10upx;
		margin-top: 10upx;
		overflow: hidden;
		margin-bottom:60upx;
		.input-column{
		    padding: 30rpx 20rpx 10rpx 20rpx;
			border-bottom: 1px solid #EEEEEE;
			.title{
			    margin-left: 10rpx;
			    font-size: 28rpx;
			}
			.input-item{
			    display: flex;
			    flex-direction: row;
			    justify-content: space-between;
			    align-items: center;
				input{
				    width: 90%;
					color: #999;
				}
			}
		}
	}
	.login-btn{
		width: 502rpx;
		margin: 46rpx auto 0;
		height: 88rpx;
		background: #84C0F4;
		border-radius: 4rpx;
		opacity: 1;
		line-height: 88rpx;
	}
	.agreement {
		margin-top: 20rpx;		
		z-index: 2;		
		.agreement2{
			position: relative;
			top: -23px;
			left: 287rpx;
			color:#84C0F4 ;
		}		
	}
</style>
